<%@ page import="com.nebula.common.Const" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title><%=Const.SYSTEM_NAME%>-注册</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/Base.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css">
    <!--[if lt IE 9]>
    <script src="/assets/html5shiv/html5shiv.min.js"></script>
    <script src="/assets/respond/respond.js"></script>
    <![endif]-->
    <style>
        .error-info {
            color: red;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-xs-offset-4 col-xs-6 clearfix">
            <form action="${pageContext.request.contextPath}/registerServlet" role="form" class="form-signin"
                  method="post" id="register-form">
                <h2 class="form-signin-heading text-center">用户注册</h2>
                <input type="text" class="form-control" placeholder="用户名" required autofocus
                       autocomplete="off" oninvalid="setCustomValidity('请输入用户名');" oninput="setCustomValidity('');"
                       id="username" name="username">
                <input type="password" class="form-control mt-5" placeholder="密码" required autocomplete="off"
                       oninvalid="setCustomValidity('请输入密码');" oninput="setCustomValidity('');" id="password"
                       name="password">
                <input type="password" class="form-control mt-5" placeholder="确认密码" required autocomplete="off"
                       oninvalid="setCustomValidity('请输入确认密码');" oninput="setCustomValidity('');" id="re_password"
                       name="re_password">
                <input type="text" class="form-control mt-5" placeholder="姓名" required autofocus
                       autocomplete="off" oninvalid="setCustomValidity('请输入姓名');" oninput="setCustomValidity('');"
                       id="realname" name="realname">
                <select class="form-control mt-5" id="gender" name="gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                    <option value="保密">保密</option>
                </select>
                <button type="button" class="btn btn-primary btn-block mt-5" id="register">注册</button>
                <div id="form-footer clearfix" class="mt-5">
                    <span class="error-info pull-left" id="errMsg"></span>
                    <p class="pull-right">已有账号? <a href="login.jsp">立即登录</a></p>
                </div>
            </form>
        </div>
    </div>
</div>
<form action="${pageContext.request.contextPath}/question?method=index" role="form" class="form-signin"
      method="post" id="question-form" style="display: none">
    <input id="userId" name="userId" type="hidden">
</form>
<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.validate.js"></script>
<script src="${pageContext.request.contextPath}/js/messages_zh.js"></script>
<script>
    $(function () {
        $("#register").click(function () {
            var $user = $("#username"),
                $pwd = $("#password"),
                $rePwd = $("#re_password"),
                $realname = $("#realname"),
                $gender = $("#gender");
            var username = $user.val().replace(/\s+/g, ''),
                password = $pwd.val().replace(/\s+/g, ''),
                rePassword = $rePwd.val().replace(/\s+/g, ''),
                realname = $realname.val().replace(/\s+/g, ''),
                gender = $gender.val();

            if (username.length === 0) {
                $("#errMsg").text("请输入用户名");
                $user.focus();
                return;
            }
            if (password.length === 0) {
                $("#errMsg").text("请输入密码");
                $pwd.focus();
                return;
            }
            if (rePassword.length === 0) {
                $("#errMsg").text("请输入确认密码");
                $rePwd.focus();
                return;
            }
            if (realname.length === 0) {
                $("#errMsg").text("请输入姓名");
                $realname.focus();
                return;
            }
            if (password !== rePassword) {
                $("#errMsg").text("两次密码不一致");
                $rePwd.focus();
                return;
            }
            $.ajax({
                url: "${pageContext.request.contextPath}/user",
                type: "post",
                data: {
                    method: "register",
                    username: username,
                    password: password,
                    rePassword: rePassword,
                    realname: realname,
                    gender: gender
                },
                dataType: "json",
                success: function (data) {
                    if (data.status === 20000) {
                        $("#userId").val(data.data.userId);
                        $("#question-form").submit();
                    } else {
                        $("#errMsg").text(data.msg);
                    }
                },
                error: function () {
                    $("#errMsg").text("未知错误，请联系系统管理员！");
                }
            });
        });

        $("input[type='text'], input[type='password']").on("input", function () {
            $("#errMsg").text("");
        });
    });
</script>
</body>
</html>
